<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col :span="24">
					<el-form :inline="true"  ref="searchForm" :model="searchForm">
		  		  <el-form-item prop="app_status">
              <el-select size="small" style="width:120px;" v-model="searchForm.app_status" 
             placeholder="审批状态">
              <el-option v-for="(value,key) in appStatus" :label="value" :value="key"></el-option>
              </el-select>
		  		  </el-form-item>
		  		  
		  		  <el-form-item prop="type">
              <el-select size="small" style="width:120px;" v-model="searchForm.type" 
              placeholder="申请类型">
              <el-option v-for="(value,key) in appType" :label="value" :value="key"></el-option>
              </el-select>
		  		  </el-form-item>
					
						<el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="请选择申请时间范围" 
                  @change="startDateChange"
                  type="daterange" style="width:210px;">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="end">
                <el-date-picker 
                  v-model="searchForm.end" 
                  placeholder="请选择期望交付时间范围" 
                  @change="endDateChange"
                  type="daterange"
                  size="small" style="width:210px;">
                </el-date-picker>
            </el-form-item>	

					  <el-form-item> 
					    <el-button type="primary" size="small" icon="search" @click="loadDatalist">查询</el-button>
					    <el-button @click="resetBack" size="small" style="margin-left:10px;">重置</el-button>
					  </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<!-- 勾选用这个:@selection-change="handleSelectionChange";点击选中用@row-click="handleSelectionChange" -->
			<el-row>
				<el-col :span="24">
					<el-table 
					  :data="dataList" 
				      v-loading="dataLoad" 
				      element-loading-text="{:L('DATA_LOGIN')}"
				      highlight-current-row
				      @row-click="handleChange" @row-dblclick="showInfo"
					 		border>
					 	
					  <el-table-column  label="序号"  width="70" :formatter="handleIndex" >
					  </el-table-column>
				    <el-table-column prop="app_name" label="申请人" width="120" align="center">
				    </el-table-column>
				    <el-table-column prop="type" label="申请类型" width="120" align="center">
				    	  <template scope="scope">
				          {{ getType(scope.row.type, 'appType') }}
				        </template>
				    </el-table-column>
					 	<el-table-column prop="reason" label="申请事由" width="130" align="center">
				    	<template scope="scope">
                {{ scope.row.reason | handleString(6) }}
	            </template>
				    </el-table-column>
				    
				    <el-table-column prop="app_time" label="申请日期" width="190" align="center">
				    </el-table-column>
				     <el-table-column prop="exp_time"  label="期望交付日期" width="190" align="center">
				    </el-table-column>
				    <el-table-column prop="inspector" label="核查人员" width="140" align="center">
				    	<template scope="scope">
					          {{ getType(scope.row.inspector, 'userNames') }}
					        </template>
				    </el-table-column>
				    <el-table-column prop="check_time"  label="核查日期" width="190" align="center">
				    </el-table-column>
				    <el-table-column prop="approval_time"  label="审批日期" width="190" align="center">
				    </el-table-column>
          	<el-table-column  align="center" prop="app_status" label="审批状态" width="150px">
            <template scope="scope">
              <el-tag v-if="scope.row.app_status === '2'" type="primary">待审批</el-tag>
              <el-tag v-else-if="scope.row.app_status === '1'" type="success">审批通过</el-tag>
              <el-tag v-else="scope.row.app_status === '-1'" type="danger">审批不通过</el-tag>
            </template>
          	</el-table-column>
				      
				       
				    <el-table-column prop="remark" label="备注"  align="center" width="150px">
				    	<template scope="scope">
                {{ scope.row.remark | handleString(6) }}
	            </template>
				    </el-table-column>
			    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->
			
			<!-- toolbar -->
				<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
				  <el-col :span="12">
				  <div class="grid-content bg-purple">
				  	<el-button-group>
				  		<el-button size="small"  @click="openDialog('approval')"  type="primary">审批</el-button>
				    </el-button-group>
				  </div>
				  </el-col>
				  <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    <include file="Common:_pagination" />
				    <!-- / page -->
				    
				  </div></el-col>
				</el-row>
			<!-- / toolbar -->
		</div>
		
		<div class="dialogWrapper" v-show="show" style="display: none">
			<include file="_infoContents" />
			<include file="_approvalStatus" />
		
		</div>

	</div>
</block>
<block name="scripts">
<script>
	page.approvalUrl="{:U(approval)}";
	window.defaultOption.setDatas({
    multipleSelection: [],
    userNames:{:json_encode($userNames)},
    appType:{:json_encode($appType)},
    departmentType:{:json_encode($departmentType)},
    monthType:{:json_encode($monthType)},
    appStatus:{:json_encode($appStatus)},
    dataList:[],
    infoDialog:false,
    infoData:{},
    first:'first',
    addRules:{
			app_status:[
      {required: true, message: '请选择是否通过'},
			]
		},
    }).setForm('search',{
    type:"",
    app_status:'',
    start:"",
    end:"",
    }).setForm('approval',{
    	id:"",
      app_status:"",
      remark:"",
    },true).setMethod('resetBack',function(){
    window.location.href="{:U('index')}";
  }).setMethod('getType', function(type, field){
 		return this[field][type];
  }).setMethod('startDateChange', function(v){
    this.searchForm.start1 = v.slice(0,10);
    this.searchForm.start2 = v.slice(13);
  }).setMethod('endDateChange', function(v){
    this.searchForm.end1 = v.slice(0,10);
    this.searchForm.end2 = v.slice(13);
  }).setMethod('handleChange', function(val){
	  this.multipleSelection = val; //点击勾选用这个
		//点击选中用这个 开始
		/*this.deleteArrAllItem('multipleSelection');
		this.multipleSelection.push(val) ;*/
		//点击选中用这个 结束
	    
	}).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
  }).setMethod('beforeApproval', function(){
	    var form = 'approval';
	    var vmThis = this;
	    if (this.multipleSelection.length ==0 ) {
	      this.closeDialog(form);
	      this.$message.error('请先选择一条信息');
	    } else if(this.multipleSelection.length > 1){
	    	this.closeDialog(form);
	        this.$message.error('只能选择一条信息');
	    } else {
	       var row = this.multipleSelection;
	       this.approvalForm.id = row.id;
	       console.log(row);
	       if(row.approval_time){
	       	this.closeDialog(form);
	       	this.$message.error('该条信息已审批，不可再次审批 ！');
	       }else{
	       	 this.openDialog(form);
	       }
	    }
	  })
</script>
</block>